<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="900px"
    center
    append-to-body
  >
    <div class="content-box">
      <div class="search-box">
        <el-form label-width="100px" :inline="true">
          <el-form-item label="材料名称">
            <el-input v-model="name" />
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        </el-form>
      </div>
      <div class="left-tree">
        <el-table
          :data="treeData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          highlight-current-row
          default-expand-all
          :tree-props="{children: 'nodes', hasChildren: 'hasChildren'}"
          @current-change="handleNodeClick"
        >
          <el-table-column
            prop="name"
            label="材料分类"
          />
        </el-table>
      </div>
      <div class="right-content">
        <div class="top-table-content">
          <com-table
            highlight-current-row
            :data="tableData"
            :columns="tableColumn"
            :total="total"
            @pageChange="pageChange"
          >
            <template v-slot:enable="{row}">
              {{ row.enable?'是':'否' }}
            </template>
            <template v-slot:type="{row}">
              {{ row.type == 1 ? '消耗材' : row.type == 2 ? '周转材' : '未知材料' }}
            </template>
            <template v-slot:options="{row}">
              <el-button type="success" size="mini" @click="addToTarget(row)">添加</el-button>
            </template>
          </com-table>
        </div>
        <div class="action-btns">
          <!-- <el-button type="primary">添加</el-button>
          <el-button type="danger">删除</el-button> -->
        </div>
        <div class="bottom-table-content">
          <com-table
            :data="targetList"
            :columns="tableColumn"
            :no-page="true"
            @getSelectedRows="getSelectedRows"
          >
            <template v-slot:enable="{row}">
              {{ row.enable?'是':'否' }}
            </template>
            <template v-slot:type="{row}">
              {{ row.type == 1 ? '消耗材' : row.type == 2 ? '周转材' : '未知材料' }}
            </template>
            <!-- <template v-slot:number="{row}">
              {{ row.code }}
            </template>
            <template v-slot:count="{row}">
              <el-input v-model="row.count" />
            </template>
            <template v-slot:price="{row}">
              <el-input v-model="row.price" />
            </template>
            <template v-slot:amount="{row}">
              <el-input v-model="row.amount" />
            </template>
            <template v-slot:description="{row}">
              <el-input v-model="row.description" />
            </template>
            <template v-slot:options="{row}">
              <el-button type="danger" size="mini" @click="deleteTarget(row)">删除</el-button>
            </template> -->
            <template v-slot:number="{row}">
              <el-input v-model="row.number" />
            </template>
            <template v-slot:name="{row}">
              <el-input v-model="row.name" />
            </template>
            <template v-slot:specification="{row}">
              <el-input v-model="row.specification" />
            </template>
            <template v-slot:unit="{row}">
              <el-input v-model="row.unit" />
            </template>
            <template v-slot:unitPrice="{row}">
              <el-input v-model="row.unitPrice" />
            </template>
            <template v-slot:count="{row}">
              <el-input v-model="row.count" />
            </template>
            <template v-slot:otherPrice="{row}">
              <el-input v-model="row.otherPrice" />
            </template>
            <template v-slot:otherPriceDesc="{row}">
              <el-select v-model="row.otherPriceDesc" style="width: 100%;" placeholder="请选择">
                <el-option v-for="item in otherPriceDescTypes" :key="item.name" :label="item.name" :value="item.value" />
              </el-select>
            </template>
            <template v-slot:sumPrice="{row}">
              <el-input v-model="row.sumPrice" />
            </template>
            <template v-slot:qualityInspectionNumber="{row}">
              <el-input v-model="row.qualityInspectionNumber" />
            </template>
            <template v-slot:description="{row}">
              <el-input v-model="row.description" />
            </template>
            <template v-slot:options="{row}">
              <el-button type="danger" size="mini" @click="deleteTarget(row)">删除</el-button>
            </template>
          </com-table>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { otherPriceDescTypes } from '@/utils/dicData'
export default {
  name: 'MaterialListModal',
  components: {

  },
  props: {
    title: {
      type: String,
      default: ''
    },
    showModal: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    apiObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      name: '',
      otherPriceDescTypes,
      visible: false,
      dataList: [],
      types: {
        1: '消耗材', 2: '周转材', 3: '设备'
      },
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      treeData: [], // 树列表
      tableData: [], // 表格列表
      targetList: [], // 选中材料
      // selectRow: null,
      tableColumn: [
        {
          label: '材料编码',
          prop: 'code'
        },
        {
          label: '材料名称',
          prop: 'name'
        },
        {
          label: '规格',
          prop: 'specification'
        },
        {
          label: '单位',
          prop: 'unit'
        },
        {
          label: '类型',
          prop: 'type',
          slot: 'type'
        },
        {
          label: '禁用',
          prop: 'enable',
          slot: 'enable'
        },
        {
          label: '说明',
          prop: 'description'
        },
        {
          label: '操作',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
      }
    }
  },
  watch: {
    showModal: {
      handler(newData) {
        if (newData) {
          this.initTree()
        } else {
          this.targetList = []
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    search() {
      this.getTableList(this.directCurrentNode)
    },
    deleteTarget(obj) {
      this.targetList.map((item, m) => {
        if (item.id === obj.id) {
          this.targetList.splice(m, 1)
        }
      })
    },
    addToTarget(obj) {
      // var flag = false
      // this.targetList.map(item => {
      //   if (item.id === obj.id) {
      //     flag = true
      //   }
      // })
      // if (flag) {
      //   this.$message({
      //     type: 'warning',
      //     message: '数据已存在!'
      //   })
      // } else {
      //   this.targetList.push(obj)
      // }
      this.targetList.push({ ...obj, number: obj.code })
    },
    confirm() {
      this.show = false
      if (this.targetList.length > 0) {
        const tempData = JSON.parse(JSON.stringify(this.targetList))
        this.$emit('getSelectedRows', tempData)
      }
    },
    getSelectedRows(data) {
      this.targetList = data
    },
    pageChange(data) {
      this.pageParams = data
      this.getTableList(this.directCurrentNode)
    },
    // 获取树结构目录
    initTree() {
      this.apiObj['tree']().then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
        if (nodes && nodes.length > 0) {
          this.getTableList(nodes[0])
        }
      })
    },
    // 材料目录相关
    handleNodeClick(val) {
      this.directCurrentNode = val
      this.getTableList(val)
    },
    // 获取材料表格数据
    getTableList(data) {
      const { id, code } = data
      if (id) {
        const params = {
          'materialDirectoryId': id,
          'name': this.name,
          'code': code,
          ...this.pageParams
        }
        this.apiObj['list'](params).then(res => {
          const { data, total } = res.data || {}
          if (data) {
            this.tableData = res.data.data
            this.total = total - 0
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.com-form-title{
  font-size: 14px;
  font-weight: bold;
  line-height: 35px;
  color: #409EFF;
  border-bottom: 1px solid #dedede;
  margin-bottom: 6px;
}
::v-deep .content-box{
  overflow: hidden;
  .search-box {
    margin-top: 15px;
  height: 50px;
}
  .left-tree{
    width: 200px;
    float: left;
    max-height:600px;
    overflow-y: auto;
  }
  .right-content{
    width: calc(100% - 210px);
    float: right;
    .top-table-content{
      min-height: 200px;
    }
    // .action-btns{
    //   padding: 10px;
    // }
    .bottom-table-content{
      min-height: 200px;
    }
  }
}
</style>
